<template>
  <div class="grid grid-cols-6 grid-rows-[auto_auto] gap-2 items-start">
    <div class="flex flex-col items-center bg-[#ecf2ff] text-[#5d87ff] rounded-md p-6">
      <img src="@/assets/images/icon-user-male.svg" />
      <span class="text-sm font-semibold">员工数量</span>
      <b class="text-lg font-semibold">96</b>
    </div>
    <div class="flex flex-col items-center bg-[#fef5e5] text-[#ffae1f] rounded-md p-6">
      <img src="@/assets/images/icon-briefcase.svg" />
      <span class="text-sm font-semibold">客户数量</span>
      <b class="text-lg font-semibold">3,650</b>
    </div>
    <div class="flex flex-col items-center bg-[#e8f7ff] text-[#49beff] rounded-md p-6">
      <img src="@/assets/images/icon-mailbox.svg" />
      <span class="text-sm font-semibold">项目数量</span>
      <b class="text-lg font-semibold">356</b>
    </div>
    <div class="flex flex-col items-center bg-[#fdede8] text-[#fa896b] rounded-md p-6">
      <img src="@/assets/images/icon-favorites.svg" />
      <span class="text-sm font-semibold">活动数量</span>
      <b class="text-lg font-semibold">696</b>
    </div>
    <div class="flex flex-col items-center bg-[#e6fffa] text-[#13deb9] rounded-md p-6">
      <img src="@/assets/images/icon-speech-bubble.svg" />
      <span class="text-sm font-semibold">工资</span>
      <b class="text-lg font-semibold">$96k</b>
    </div>
    <div class="flex flex-col items-center bg-[#ebf3fe] text-[#539bff] rounded-md p-6">
      <img src="@/assets/images/icon-connect.svg" />
      <span class="text-sm font-semibold">报告</span>
      <b class="text-lg font-semibold">59</b>
    </div>

    <div
      class="rounded-md border-el-light border-1 border-solid shadow-sm col-start-1 -col-end-3 p-6"
    >
      <div class="flex justify-between items-center">
        <h4 class="flex flex-col">
          <span class="text-lg font-semibold">收入更新</span>
          <span class="text-sm font-thin">利润概览</span>
        </h4>
        <el-select style="width: 150px">
          <el-option
            v-for="item in ['2024 年 3 月', '2024 年 2 月', '2024 年 1 月']"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="flex">
        <div class="flex-1"></div>
        <div class="w-50">
          <div class="flex gap-2 mt-6">
            <div class="flex justify-center items-center p-1">
              <div class="bg-[#ecf2ff] text-[#5d87ff] rounded-sm">
                <SlGrid class="align-middle" />
              </div>
            </div>
            <div class="flex flex-col">
              <span class="text-lg font-semibold">$63,489.50</span>
              <span class="text-sm font-thin">总收益</span>
            </div>
          </div>
          <div
            class="grid grid-rows-5 gap-x-2 my-10 grid-cols-[auto_1fr] items-center justify-items-start"
          >
            <span class="rounded-full bg-[#5d87ff] w-2 h-2"></span>
            <span class="text-sm font-thin">本月收益</span>
            <span class="text-base font-semibold col-start-2">$48,820</span>
            <span class="col-span-full"></span>

            <span class="rounded-full bg-[#49beff] w-2 h-2"></span>
            <span class="text-sm font-thin">本月支出</span>
            <span class="text-base font-semibold col-start-2">$26,498</span>
            <span class="col-span-full"></span>
          </div>
          <el-button class="w-full" type="primary">查看完整报告</el-button>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-2 col-span-2">
      <div class="rounded-md border-el-light border-1 border-solid shadow-sm p-6">
        <h5 class="text-lg font-medium">年支出</h5>
        <div class="flex mt-4">
          <div class="flex flex-col gap-2">
            <span class="text-xl font-semibold">$36,358</span>
            <div class="flex items-center gap-1">
              <div class="bg-[#e6fffa] rounded-full w-8 h-8 flex items-center justify-center">
                <SlArrowUpLeft class="align-middle" />
              </div>
              <span class="text-sm font-bold">+9%</span>
              <span class="text-sm text-gray-500">最近一年</span>
            </div>
            <div class="flex justify-between mt-5">
              <div class="flex items-center gap-1">
                <span class="rounded-full bg-[#5d87ff] w-2 h-2"></span>
                <span class="text-sm">2025</span>
              </div>
              <div class="flex items-center gap-1">
                <span class="rounded-full bg-[#49beff] w-2 h-2"></span>
                <span class="text-sm">2024</span>
              </div>
            </div>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
      <div class="relative rounded-md border-el-light border-1 border-solid shadow-sm p-6">
        <h5 class="text-lg font-medium">月收入</h5>
        <div class="flex flex-col gap-2 mt-4">
          <span class="text-xl font-semibold">$36,358</span>
          <div class="flex items-center gap-1">
            <div class="bg-[#fdede8] rounded-full w-8 h-8 flex items-center justify-center">
              <SlArrowDownRight class="align-middle" />
            </div>
            <span class="text-sm font-bold">+9%</span>
            <span class="text-sm text-gray-500">最近一年</span>
          </div>
        </div>
        <el-button
          class="absolute right-6 top-6"
          type="primary"
          :icon="SlCurrencyDollar"
          circle
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SlGrid, SlArrowUpLeft, SlArrowDownRight, SlCurrencyDollar } from '@/assets/icons'
</script>

<style scoped lang="scss"></style>
